<template>
  <div>
    <div class="background-container">
      <div class="background-image">
        <div class="content">
          <span class="textStyle">后勤资产</span>
        </div>
        <div class="colorWhite" @click="jumpToAssetQuery">
          <img src="images/home/saoyi.svg">
          <p>扫一扫</p>
        </div>

      </div>
      <div class="dataStyle" @click="jumpToAssetHouseEquipment">
        <div class="listMain">
          <img src="images/home/fang.svg">
        </div>
        <div class="logoBox">
          <p style="margin-bottom: 10px;font-weight: bold;font-size: 18px;">
            <span>楼宇设备</span>
          </p>
          <p style="margin-top: 10px;margin-bottom: 10px;">
            <span>设备总数:&nbsp;&nbsp;&nbsp;</span><span>{{ dataInfo.buildingTotal }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;已贴签:&nbsp;&nbsp;&nbsp;<span>{{ dataInfo.buildingFinished }}</span>
          </p>
          <div class="downOtherProcessStyle">
            <span>贴签率</span>
            <div class="downOtherProcess">
              <van-progress
                :percentage="progress"
                color="#67DAED"
                track-color="#ebf0ed87"
              />
            </div>
            <span>&nbsp;&nbsp;{{ dataInfo.buildingFinished }}/{{ dataInfo.buildingTotal }}</span>
          </div>
        </div>
      </div>
      <div class="dataStyle1" @click="jumpToOfficeMaterialRegister">
        <div class="listMain1">
          <img src="images/home/bang.svg">
        </div>
        <div class="logoBox">
          <p style="margin-bottom: 10px;font-weight: bold;font-size: 18px;">
            <span>办公物资</span>
          </p>
          <p style="margin-top: 10px;margin-bottom: 10px;">
            <span>设备总数:&nbsp;&nbsp;&nbsp;</span><span>{{ dataInfo.officeTotal }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;已贴签:&nbsp;&nbsp;&nbsp;<span>{{ dataInfo.officeFinished }}</span>
          </p>
          <div class="downOtherProcessStyle">
            <span>贴签率</span>
            <div class="downOtherProcess">
              <van-progress
                :percentage="progress"
                color="#5859EA"
                track-color="#ebf0ed87"
              />
            </div>
            <span>&nbsp;&nbsp;{{ dataInfo.officeFinished }}/{{ dataInfo.officeTotal }}</span>
          </div>
        </div>
      </div>
      <div class="dataStyle2" @click="jumpToServiceEquipment">
        <div class="listMain2">
          <img src="images/home/fuw.svg">
        </div>
        <div class="logoBox">
          <p style="margin-bottom: 10px;font-weight: bold;font-size: 18px;">
            <span>服务设备</span>
          </p>
          <p style="margin-top: 10px;margin-bottom: 10px;">
            <span>设备总数:&nbsp;&nbsp;&nbsp;</span><span>{{ dataInfo.serviceTotal }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;已贴签:&nbsp;&nbsp;&nbsp;<span>{{ dataInfo.serviceFinished }}</span>
          </p>
          <div class="downOtherProcessStyle">
            <span>贴签率</span>
            <div class="downOtherProcess">
              <van-progress
                :percentage="service"
                color="#F68B88"
                track-color="#ebf0ed87"
              />
            </div>
            <span>&nbsp;&nbsp;{{ dataInfo.serviceFinished }}/{{ dataInfo.serviceTotal }}</span>
          </div>
        </div>
      </div>
    </div>
    <moveBtn @on-click="onClickLeft" />
  </div>
</template>

<script>

import { getDetailBySwid, getLabeledInfo } from '@api/srvAssurance/assetLabel/assetLabel'
import * as numberString from 'echarts'

export default {
  data () {
    return {
      dataInfo: {
        buildingFinished: 0,
        buildingTotal: 0,
        officeFinished: 0,
        officeTotal: 0,
        serviceFinished: 0,
        serviceTotal: 0,
      },
      percentage:'',
      progress: '',
      service: '',
      maxDigits: 3,
    }
  },
  created () {
    this.initData()
  },
  computed: {},
  methods: {
    onClickLeft () {
      this.$router.go(-1);
    },
    async initData () {
      let resData = await getLabeledInfo()
      if (resData.status == 0) {
        this.dataInfo = resData.data
        let data = resData.data
        this.percentage = (data.buildingFinished / data.buildingTotal) * 100
        this.progress = (data.officeFinished / data.officeTotal) * 100
        this.service = (data.serviceFinished / data.serviceTotal) * 100
        const numberString = this.dataInfo.buildingTotal.toString();
        if (this.dataInfo.buildingTotal.toString().length  > this.maxDigits){
          const trimmedNumber = numberString.substring(0, 3) + '...';
          this.dataInfo.buildingTotal = trimmedNumber
        }

        const numberStringoff = this.dataInfo.officeTotal.toString();
        if (this.dataInfo.officeTotal.toString().length  > this.maxDigits){
          const trimmedNumberoff = numberStringoff.substring(0,3 )+'...';
          this.dataInfo.officeTotal = trimmedNumberoff
        }
        const numberStringser = this.dataInfo.serviceTotal.toString();
        if (this.dataInfo.serviceTotal.toString().length  > this.maxDigits){
          const trimmedNumberser = numberStringser.substring(0,3 )+'...';
          this.dataInfo.serviceTotal = trimmedNumberser
        }
      } else {
        this.dataInfo = {}
      }
    },
    jumpToAssetQuery  () {
      let _this = this
      wx.scanQRCode({
        desc: 'scanQRCode desc',
        needResult: 1, // 默认为0，扫描结果由i国网处理，1则直接返回扫描结果，
        scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
        success: async function (res) {
          if (res.resultStr) {
            let queryParam = {}
            queryParam.swid = res.resultStr
            let resData = await getDetailBySwid(queryParam)
            if (resData.status == 0) {
              _this.handleDetail({ ...resData.data[0] })
            }
          }
        },
        error: function (res) {
          if (res.errMsg.indexOf('function_not_exist') > 0) {
            alert('版本过低请升级')
          }
        },
      })
    },
    handleDetail (item) {
      if (item.shebType == '03') {
        this.$router.push({
          path: '/asset/assetHouseEquipmentDetaili',
          query: {
            id: item.id,
          },
        })
      } else if (item.shebType == '04') {
        this.$router.push({
          path: '/asset/officeMaterialRegisterDetail',
          query: {
            id: item.id,
          },
        })
      } else if (item.shebType == '05') {
        this.$router.push({
          path: '/asset/serviceEquipmentDetail',
          query: {
            id: item.id,
          },
        })
      }
    },
    jumpToAssetHouseEquipment () {
      this.$router.push({ path: '/asset/assetHouseEquipment' })
    },
    jumpToOfficeMaterialRegister () {
      this.$router.push({ path: '/asset/officeMaterialRegister' })
    },
    jumpToServiceEquipment () {
      this.$router.push({ path: '/asset/serviceEquipment' })
    },
  }
}
</script>

<style scoped lang="less">
.background-container {
  height: 100vh;
  width: 100%;
  background-color: #F1F6F8;
}

.background-image {
  width: 100%;
  background-color: black;
  position: relative;
  height: 40.3333%;
  background-image: url('~@/assets/images/swzc.png');
  background-size: cover;
}

.content {
  position: relative;
  text-align: center;
  top: 12%;

  .textStyle {
    font-size: 16px;
    color: white;
  }

}

.colorWhite {
  position: relative;
  top: 39%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.83333rem;
  height: 2.83333rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  background-color: white;

}

.colorWhite img {
  position: absolute;
  top: 13%;
  text-align: center;
}

.dataStyle img {
  position: absolute;
  height: 0.93333rem;
  top: 19%;
}

.dataStyle1 img {
  position: absolute;
  height: 0.93333rem;
  top: 19%;
}

.dataStyle2 img {
  position: absolute;
  height: 0.93333rem;
  top: 19%;
}

.colorWhite p {
  position: absolute;
  top: 62%;
  left: 28%;
  font-size: 0.43333rem;
  color: rgb(71, 124, 245);
}

.dataStyle {
  position: relative;
  top: -14%;
  height: 3.4rem;
  margin: 10px;
  background-color: #ffffff;
  border-radius: 8px;

  .listMain {
    position: relative;
    top: 36%;
    left: 15%;
    transform: translate(-50%, -50%);
    width: 1.53333rem;
    height: 1.53333rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    background-color: #67DAED;
  }

  .logoBox {
    position: relative;
    margin-left: 34%;
    top: -28%;
  }
}

.dataStyle1 {
  position: relative;
  top: -14%;
  height: 3.4rem;
  margin: 10px;
  background-color: #ffffff;
  border-radius: 8px;

  .listMain1 {
    position: relative;
    top: 36%;
    left: 15%;
    transform: translate(-50%, -50%);
    width: 1.53333rem;
    height: 1.53333rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    background-color: #F68B88;

  }
  .logoBox {
    position: relative;
    margin-left: 34%;
    top: -28%;
  }
}

.dataStyle2 {
  position: relative;
  top: -14%;
  height: 3.4rem;
  margin: 10px;
  background-color: #ffffff;
  border-radius: 8px;

  .listMain2 {
    position: relative;
    top: 36%;
    left: 15%;
    transform: translate(-50%, -50%);
    width: 1.53333rem;
    height: 1.53333rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    background-color: #5859EA;
  }
  .logoBox {
    position: relative;
    margin-left: 34%;
    top: -28%;
  }
}
.downOtherProcessStyle {
  display: flex;
  align-items: center;
  height: 35%;

  .downOtherProcess {
    position: relative;
    width: 46%;
    float: left;
    margin-top: 3px;
  }
}
/deep/ .van-progress__pivot {
  display: none;
}

/deep/ .van-progress {
  margin-left: 6%;
  border-radius: 15px;
}
</style>
